<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<header-custom title="选择学校" />
		<view class="container">
			<view class="edit">
				<view class="fboxCol">
					<input class="font28 search" :value="searchNmae" maxlength="30" type="text" placeholder="查询学校"
						placeholder-class="color-9899A1" @input="onChange" />
					<radio-group @change="radioChange">
						<view class="tags-item" v-for="(item,index) in list" :key="index">
							<view class="tit mt20 font26 color-9899A1">{{item.shortName}}</view>
							<label class="fboxRow Ycenter cell" v-for="(sub, i) in item.lists" :key="i" @click="radioTap(sub)">
								<view class="flex1">{{sub.unitName}}</view>
								<view class="right fboxRow Ycenter font26">
									<radio color="#00C15D" style="transform:scale(0.7)" :value="sub.unitId" :name="sub.unitName" :checked="sub.unitId === student.unitId" />
								</view>
							</label>
						</view>
					</radio-group>
					<template v-if="loading == 'loading'"><u-loadmore fontSize="24rpx" :status="loading" /></template>					
				</view>
				<view class="bottom">
					<view class="fixed-bottom w750 fboxRow Ycenter Xcenter bg-fff">
						<view class="w690 button fboxRow Ycenter Xcenter color-fff bg-00C15D" @tap="nextClick">下一步
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import headerCustom from '@/pagesBKS/components/header-custom.vue';
	import {
		unitNameList
	} from '@/api/bks.index.js';
	export default {
		components: {
			headerCustom
		},
		data() {
			return {
				theme: 'bks-theme',
				globalColor: getApp().globalData.globalColor,
				student:{
					unitId: '',
					unitName: '',
				},
				searchNmae: '',
				list: [],
				loading: 'loading'
			}
		},
		onLoad(option) {
			this.initInfo()
			this.getShoolSelect('')
		},
		methods: {
			initInfo(){
				const student = uni.getStorageSync('bw_bks_student')
				if(student){
					this.student = student
				}
			},
			// 学校change事件
			onChange(e) {
				const searchNmae = e.detail.value
				this.getShoolSelect(searchNmae)
			},
			// 获取学校列表
			getShoolSelect(searchNmae) {
				this.loading = 'loading'
				unitNameList({
					unitName: searchNmae
				}).then(res => {
					this.list = res.data
					this.loading = 'none'
				})
			},
			// 选择学校
			radioChange(e) {},
			radioTap(e){
				this.student.unitId = e.unitId
				this.student.unitName = e.unitName
			},
			nextClick(e) {
				const {
					unitId,
					unitName
				} = this.student
				if (unitId) {
					uni.setStorageSync('bw_bks_student', this.student)
					this.$pageTo('/bks/mine/certification/name?step=2')
				} else {
					uni.showToast({
						title: '请选择学校',
						icon: 'none'
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cell{height: 88rpx;}
	.container {
		position: relative;
		padding-bottom: 30rpx;
	}

	.container .tips {
		padding: 30rpx;
		background: rgba(255, 230, 170, .3);
		border-radius: 4rpx;
		line-height: 36rpx;
		margin-bottom: 47rpx;
		margin: 20rpx 30rpx 0;
	}

	.container .edit {
		padding: 30rpx;
	}

	.container .search {
		width: 630rpx;
		height: 80rpx;
		background: #F5F6F6;
		border-radius: 34rpx;
		padding: 0 30rpx;
		margin-bottom: 30rpx;
	}

	.container .name {
		width: 630rpx;
		height: 80rpx;
		border-bottom: 1px solid #F5F6F6;
		text-align: center;
		padding: 0 30rpx;
		margin-bottom: 30rpx;
	}


	.container .result {
		height: 500rpx
	}

	.bottom {
		height: 120rpx;
	}

	.fixed-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 30rpx 0;
		z-index: 2;
	}

	.fixed-bottom .button {
		height: 80rpx;
	}

	.container .result .list .item {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		border: 1px solid #EBEBF0;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
	}

	.container .result .list .item:last-child {
		margin-bottom: 0;
	}

	.container .result .list .item.check {
		background: #F5FAF7;
		border: 1px solid #00C15D;
		color: #00C15D;
	}

	.container .van-cell__title,
	.container .van-field__label {
		font-weight: bold;
		font-size: 28rpx;
		color: #36363A;
	}

	.container .van-cell__value,
	.container .van-cell__right-icon-wrap {
		font-size: 22rpx;
	}

	.container .van-cell {
		height: 98rpx;
		display: flex;
		align-items: center;
		padding: 0;
	}

	.container .van-cell:after {
		border: 0;
	}

	.container .apply {
		position: absolute;
		bottom: 90rpx;
		width: 100%;
		text-align: center;
	}
</style>